/* Base container: desktop inline, mobile stacked */
.idence-menu-subtext{
  display:flex;
  flex-wrap:wrap;
  gap:6px 10px;
  margin-top:6px;
  padding:0 12px;
  box-sizing:border-box;
  max-width:100%;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

/* Each item as capsule */
.idence-menu-subtext .idence-subitem{
  display:inline-flex;
  align-items:center;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background:rgba(0,0,0,.03);
  font-size:12px;
  line-height:1.2;
  opacity:.9;
  white-space:nowrap;
}

/* Mobile: stacked */
@media (max-width: 767px){
  .idence-menu-subtext{
    display:block;
    padding:0 12px;
  }
  .idence-menu-subtext .idence-subitem{
    display:block;
    width:max-content;
    margin-top:6px;
  }
}

/* Show only first 4 items */
.idence-menu-subtext .idence-subitem:nth-child(n+5){
  display:none !important;
}

/* '+N more' indicator shown only when JS sets data-more and class */
.idence-menu-subtext.has-more::after{
  content:" +" attr(data-more) " more";
  display:inline-flex;
  align-items:center;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(0,0,0,.02);
  font-size:12px;
  font-weight:700;
  opacity:.75;
  white-space:nowrap;
}

/* =============================
   Attention Blink (optional)
   - .idence-blink-title: makes the whole menu title blink
   - .idence-blink-badge: adds a blinking/pulsing badge/button
============================= */

@keyframes idenceBlink{
  0%{ opacity: 1; }
  50%{ opacity: .25; }
  100%{ opacity: 1; }
}

@keyframes idencePulse{
  0%{ transform: scale(1); opacity: 1; }
  50%{ transform: scale(1.06); opacity: .6; }
  100%{ transform: scale(1); opacity: 1; }
}

.idence-blink-title{
  animation: idenceBlink 1s steps(2, end) infinite;
}

.idence-blink-badge{
  display:inline-flex;
  align-items:center;
  margin-left:8px;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.18);
  background:rgba(255, 193, 7, .18);
  font-size:11px;
  font-weight:800;
  line-height:1;
  letter-spacing:.3px;
  animation: idencePulse 1s infinite;
}

@media (prefers-reduced-motion: reduce){
  .idence-blink-title,
  .idence-blink-badge{
    animation: none !important;
  }
}