/* =========================================================
   ZAR LLM INSIGHT — CLEAN + SAFE (NO LAYOUT SIDE EFFECTS)
   Fixes:
   - removes animation that can trigger reflow/scroll issues
   - avoids heavy box-shadow repaints on mobile
   - ensures no overflow or position conflicts
========================================================= */

.genebean_guard_entry--wordnet .zar-llm-insight {
  position: relative;

  margin: 0.9rem 0 1rem 0;
  padding: 1rem 1.05rem;

  border-radius: 20px;

  border: 1px solid rgba(149,118,255,0.18);

  background:
    radial-gradient(circle at 12% 20%, rgba(196,116,255,0.14), transparent 32%),
    radial-gradient(circle at 82% 24%, rgba(94,139,255,0.10), transparent 28%),
    linear-gradient(135deg,
      rgba(22,14,42,0.88) 0%,
      rgba(13,18,44,0.92) 55%,
      rgba(10,16,40,0.95) 100%
    );

  box-shadow:
    0 10px 24px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.04);

  overflow: hidden;

  /* 🔥 critical: prevent layout influence */
  contain: layout paint;
}


/* subtle overlay (safe, no animation) */
.genebean_guard_entry--wordnet .zar-llm-insight::before {
  content: "";
  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(132,170,255,0.04) 50%,
      transparent 100%
    );
}


/* =================================
   HEADER
================================= */

.genebean_guard_entry--wordnet .zar-llm-header {
  display: flex;
  align-items: center;
  gap: 0.35rem;

  margin-bottom: 0.7rem;

  font-size: 1rem;
  font-weight: 800;
  line-height: 1.3;

  color: #f2f5ff;
}


/* badge */

.genebean_guard_entry--wordnet .zar-llm-sub {
  display: inline-flex;
  align-items: center;

  margin-left: 0.2rem;
  padding: 0.22rem 0.6rem;

  border-radius: 999px;

  border: 1px solid rgba(163,132,255,0.2);
  background: rgba(255,255,255,0.03);

  font-size: 0.8rem;
  font-weight: 700;

  color: rgba(215,223,255,0.85);
}


/* =================================
   TEXT
================================= */

.genebean_guard_entry--wordnet .zar-llm-insight p {
  position: relative;
  z-index: 1;

  margin: 0;

  font-size: 0.98rem;
  line-height: 1.7;

  color: rgba(239,242,255,0.95);
}

.genebean_guard_entry--wordnet .zar-llm-insight strong {
  color: #ffffff;
  font-weight: 700;
}


/* =================================
   WORD EFFECTS (LIGHTWEIGHT)
================================= */

.genebean_guard_entry--wordnet .zar-llm-insight .gb-word {
  transition: opacity 0.18s ease;
}

.genebean_guard_entry--wordnet .zar-llm-insight .gb-word.gb-word--visible {
  opacity: 1;
}


/* =================================
   MODEL LABEL
================================= */

.zar-ai-model-card__title {
  font-style: italic;
  color: #6f7078;
  font-size: 0.65rem;
}


/* =========================================================
   MOBILE — PERFORMANCE SAFE
========================================================= */

@media (max-width: 768px) {

  .genebean_guard_entry--wordnet .zar-llm-insight {
    padding: 0.85rem 0.85rem;
    border-radius: 16px;

    /* 🔥 lighter shadow for mobile */
    box-shadow:
      0 6px 18px rgba(0,0,0,0.22),
      inset 0 1px 0 rgba(255,255,255,0.04);
  }

  .genebean_guard_entry--wordnet .zar-llm-header {
    font-size: 0.95rem;
    flex-wrap: wrap;
  }

  .genebean_guard_entry--wordnet .zar-llm-sub {
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
  }

  .genebean_guard_entry--wordnet .zar-llm-insight p {
    font-size: 0.95rem;
    line-height: 1.65;
  }

}