/* =========================================================
   PATCH 2026-08-26 | ZAR AI GROUP-COUNT SUGGESTION (Study Matrix)

   Reuses the Stage 5 "Ask for guidance" visual language for the new
   Stage 4 "Number of groups to rename" suggestion button, and reuses
   the existing Stage 5 activity animations (emc-sample-design-heartbeat,
   emc-sample-design-text-scan) defined in emc_sample_design.css rather
   than redefining them. This is an assistive suggestion only: it never
   disables the dropdown it populates.
========================================================= */

.marss-emc .emc-group-count-suggest{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}

/* Same visual identity as #emcAskZarSampleDesignBtn.emc-zar-action (Stage 5),
   scoped to this button's own id so Stage 5 styling stays untouched. */
.marss-emc #emcSuggestGroupCountBtn.emc-zar-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;

  width:fit-content;
  padding:7px 12px;

  cursor:pointer;

  border:1px solid #c4d3e9;
  border-radius:8px;
  background:#fff;
  color:#405272;

  box-shadow:none!important;
  transform:none!important;

  transition:
    background-color .18s ease,
    border-color .18s ease,
    color .18s ease;
}

.marss-emc #emcSuggestGroupCountBtn.emc-zar-action:hover:not(:disabled){
  border-color:#92afd5;
  background:#f4f8fe;
  color:#304b74;
}

.marss-emc #emcSuggestGroupCountBtn.emc-zar-action:active:not(:disabled){
  background:#eef4fc;
}

.marss-emc #emcSuggestGroupCountBtn.emc-zar-action:disabled{
  cursor:default;
  opacity:.62;
}

.marss-emc #emcSuggestGroupCountBtn .emc-zar-action-mark{
  width:20px;
  height:20px;
  flex:0 0 20px;
  object-fit:contain;
}

.marss-emc #emcSuggestGroupCountBtn .emc-zar-action-label{
  display:inline-flex;
  align-items:baseline;
  gap:.3rem;
  line-height:1;
  white-space:nowrap;
  font-size:.78rem;
}

.marss-emc #emcSuggestGroupCountBtn .emc-zar-action-label strong{
  color:#334c75;
  font-weight:850;
}

.marss-emc #emcSuggestGroupCountBtn .emc-zar-action-divider{
  opacity:.5;
}

/* =========================================================
   INLINE STATUS (compact analogue of the Stage 5 activity strip)
========================================================= */

.marss-emc .emc-group-count-suggest-status{
  display:flex;
  align-items:center;
  gap:6px;
  min-height:1.1rem;
  color:var(--emc-muted);
  font-size:.72rem;
}

.marss-emc .emc-group-count-suggest-status:empty,
.marss-emc .emc-group-count-suggest-status[data-state="idle"]{
  visibility:hidden;
}

.marss-emc .emc-group-count-suggest-signal{
  width:8px;
  height:8px;
  flex:0 0 auto;
  border-radius:50%;
  background:#59c2a5;
}

.marss-emc .emc-group-count-suggest-status[data-state="working"] .emc-group-count-suggest-signal{
  animation:emc-sample-design-heartbeat 1.35s ease-in-out infinite;
}

.marss-emc .emc-group-count-suggest-status[data-state="working"] [data-emc-group-count-suggest-text]{
  background:
    linear-gradient(
      105deg,
      var(--emc-muted) 0%,
      var(--emc-muted) 40%,
      #d9fff4 50%,
      var(--emc-muted) 60%,
      var(--emc-muted) 100%
    );

  background-size:260% 100%;
  background-position:120% 0;

  -webkit-background-clip:text;
  background-clip:text;

  color:transparent;
  -webkit-text-fill-color:transparent;

  animation:emc-sample-design-text-scan 2.9s linear infinite;
}

.marss-emc .emc-group-count-suggest-status[data-state="ready"]{
  color:#28745f;
}

.marss-emc .emc-group-count-suggest-status[data-state="ready"] .emc-group-count-suggest-signal{
  animation:none;
}

.marss-emc .emc-group-count-suggest-status[data-state="error"]{
  color:var(--emc-danger);
}

.marss-emc .emc-group-count-suggest-status[data-state="error"] .emc-group-count-suggest-signal{
  animation:none;
  background:var(--emc-danger);
}

@media(prefers-reduced-motion:reduce){
  .marss-emc .emc-group-count-suggest-status[data-state="working"] .emc-group-count-suggest-signal,
  .marss-emc .emc-group-count-suggest-status[data-state="working"] [data-emc-group-count-suggest-text]{
    animation:none;
  }

  .marss-emc .emc-group-count-suggest-status[data-state="working"] [data-emc-group-count-suggest-text]{
    background:none;
    color:inherit;
    -webkit-text-fill-color:currentColor;
  }
}

@media(max-width:768px){
  .marss-emc .emc-group-count-suggest{
    width:100%;
  }

  .marss-emc #emcSuggestGroupCountBtn.emc-zar-action{
    width:100%;
  }
}