/* ==========================================================================
   Niwa Chatbot – Typing / Thinking Indicator
   ---------------------------------------------------------------------------
   Two visual modes:
     1. DOTS  — three bouncing dots in a bubble (.niwa-typing--dots)
     2. TEXT  — shining gradient text sweep   (.niwa-typing--text)

   The text mode uses a moving gradient with background-clip: text
   to create a shimmer/shine effect (adapted from React ShiningText).

   TEXT CONTENT is set via data-text attribute or inner text,
   making it easy to localize: "Thinking...", "Razmislja...", etc.

   STRUCTURE:
     .niwa-typing
       .niwa-typing__avatar
       .niwa-typing__bubble          (dots mode)
         .niwa-typing__dot  x3
       .niwa-typing__text            (text mode — shining)

   ========================================================================== */

/* ── Shared Container ───────────────────────────────────────────────────── */
/* .niwa-widget prefix for specificity — the scoped reset (.niwa-widget *)
   zeroes margin/padding, so we need at least 0-2-0 to win. */
.niwa-widget .niwa-typing,
.niwa-typing {
  display: flex;
  align-items: center;
  gap: var(--niwa-space-sm);
  align-self: flex-start;
  max-width: var(--niwa-message-bot-max-width, var(--niwa-message-row-max-width, 85%));
  margin: var(--niwa-space-sm) 0;
  /* Horizontal margin — typing indicator is a direct child of the body
     container which only has vertical padding. */
  margin-left: var(--niwa-space-lg);
  margin-right: var(--niwa-space-lg);
}

/* ── Avatar ─────────────────────────────────────────────────────────────── */
.niwa-typing__avatar {
  width: 28px;
  height: 28px;
  border-radius: var(--niwa-radius-full);
  background: var(--niwa-color-primary-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.niwa-typing__avatar svg,
.niwa-typing__avatar img {
  width: 28px;
  height: 28px;
  border-radius: var(--niwa-radius-full);
}

/* ==========================================================================
   Shining Text
   ---------------------------------------------------------------------------
   Gradient sweeps left-to-right across the text.
   Light theme: dark text with white shine
   Dark theme: grey text with white shine
   ========================================================================== */

.niwa-typing__text {
  font-size: var(--niwa-font-size-md);
  font-weight: var(--niwa-font-weight-normal);
  line-height: var(--niwa-line-height-normal);
  padding: var(--niwa-space-sm) 0;

  /* Gradient text effect */
  background: linear-gradient(
    110deg,
    #404040 35%,
    #FFFFFF 50%,
    #404040 65%,
    #404040
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;

  animation: niwa-shine-sweep 2s linear infinite;
}

/* Dark theme: lighter base so it's visible */
[data-niwa-theme="dark"] .niwa-typing__text {
  background: linear-gradient(
    110deg,
    #6B7280 35%,
    #FFFFFF 50%,
    #6B7280 65%,
    #6B7280
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
}

/* ── Shine Sweep Keyframes ──────────────────────────────────────────────── */
@keyframes niwa-shine-sweep {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}

/* ── Reduced Motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .niwa-typing__text {
    animation: none;
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    -webkit-text-fill-color: unset;
    color: var(--niwa-color-text-tertiary);
  }
}