{# Shown in chat when a FREE user reaches their message limit. Redesigned empty
   state: clear headline, reward highlight, one primary "Watch Advertisement"
   action (opens the rewarded-ad modal), a trust list, then the Premium option.
   Premium users never see this. Pass: conversation, messaging_state. #}
<div class="ad-rewarded-card" aria-label="Get more messages">
  <div class="ad-rewarded-illus" aria-hidden="true">
    <span class="ad-rewarded-illus-ring"></span>
    <span class="ad-rewarded-illus-ico"><i class="bi bi-chat-square-dots-fill"></i></span>
    <span class="ad-rewarded-illus-spark ad-rewarded-illus-spark--1"><i class="bi bi-stars"></i></span>
    <span class="ad-rewarded-illus-spark ad-rewarded-illus-spark--2"><i class="bi bi-gift-fill"></i></span>
  </div>

  <h3 class="ad-rewarded-title">Chat Limit Reached</h3>
  <p class="ad-rewarded-copy">You've used all free messages for this conversation.</p>

  <div class="ad-rewarded-reward">
    <span class="ad-rewarded-reward-text">Watch one short advertisement to instantly unlock</span>
    <span class="ad-rewarded-reward-amount">+{{ messaging_state.unlock_size }} Messages</span>
  </div>

  <button type="button" class="btn btn-primary w-100 ad-rewarded-cta" data-watch-ad-trigger
          data-watching-label="<span class='spinner-border spinner-border-sm me-1'></span> Watching advertisement…">
    <i class="bi bi-play-fill me-1" aria-hidden="true"></i> Watch Advertisement
  </button>

  <ul class="ad-trust" aria-label="What to expect">
    <li><i class="bi bi-check-circle-fill" aria-hidden="true"></i> 5-second advertisement</li>
    <li><i class="bi bi-check-circle-fill" aria-hidden="true"></i> Messages added instantly</li>
    <li><i class="bi bi-check-circle-fill" aria-hidden="true"></i> Supports CampusCart</li>
  </ul>

  <div class="ad-rewarded-or"><span>or</span></div>

  <div class="ad-rewarded-option ad-rewarded-option--premium">
    <span class="premium-badge premium-badge--sm"><i class="bi bi-star-fill" aria-hidden="true"></i> Premium</span>
    <p class="ad-rewarded-copy mt-2 mb-2">
      <strong>Upgrade to Premium</strong><br>
      Unlimited messaging forever — no limits, no ads.
    </p>
    <a href="{{ url_for('premium.index') }}" class="btn btn-outline-primary w-100">
      <i class="bi bi-star-fill me-1" aria-hidden="true"></i> Upgrade to Premium
    </a>
  </div>
</div>