<!-- Feedback Widget -->
<div id="feedback-widget" style="position:fixed;bottom:20px;right:20px;z-index:100;">
  <button
    id="feedback-btn"
    onclick="document.getElementById('feedback-popover').classList.toggle('open')"
    style="
      background:#2C1810;color:#fff;border:none;border-radius:20px;
      padding:8px 16px;font-size:13px;font-weight:600;cursor:pointer;
      box-shadow:0 4px 12px rgba(0,0,0,0.2);display:flex;align-items:center;gap:6px;
      transition:background 0.15s;
    "
    onmouseover="this.style.background='#4A2C1A'"
    onmouseout="this.style.background='#2C1810'"
  >
    <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
      <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
    </svg>
    <span class="feedback-label">Feedback</span>
  </button>

  <div
    id="feedback-popover"
    style="
      display:none;position:absolute;bottom:44px;right:0;
      width:300px;background:#fff;border:1px solid #E8DFD5;
      border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,0.12);
      padding:16px;
    "
  >
    <p style="font-size:14px;font-weight:600;color:#2C1810;margin:0 0 4px;">Share feedback</p>
    <p style="font-size:12px;color:#78716C;margin:0 0 12px;">What's on your mind?</p>
    <form
      hx-post="{{ url_for('public.feedback') }}"
      hx-target="#feedback-result"
      hx-swap="innerHTML"
      hx-on::after-request="this.reset()"
    >
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      <input type="hidden" name="page_url" id="feedback-page-url" value="">
      <textarea
        name="message"
        placeholder="Tell us what you think..."
        required
        maxlength="2000"
        style="
          width:100%;box-sizing:border-box;resize:vertical;min-height:80px;
          border:1px solid #E8DFD5;border-radius:6px;padding:8px 10px;
          font-size:13px;color:#2C1810;outline:none;font-family:inherit;
          transition:border-color 0.15s;
        "
        onfocus="this.style.borderColor='#B45309'"
        onblur="this.style.borderColor='#E8DFD5'"
      ></textarea>
      <div style="display:flex;justify-content:space-between;align-items:center;margin-top:8px;">
        <div id="feedback-result" style="font-size:12px;"></div>
        <button
          type="submit"
          style="
            background:#B45309;color:#fff;border:none;border-radius:6px;
            padding:6px 14px;font-size:13px;font-weight:600;cursor:pointer;
            transition:background 0.15s;flex-shrink:0;
          "
          onmouseover="this.style.background='#92400E'"
          onmouseout="this.style.background='#B45309'"
        >Send</button>
      </div>
    </form>
  </div>
</div>

<style>
  #feedback-popover.open { display: block; }
  @media (max-width: 767px) {
    #feedback-widget { bottom: 72px; }
    .feedback-label { display: none; }
    #feedback-btn { border-radius: 50%; padding: 10px; }
  }
</style>

<script>
  var urlInput = document.getElementById('feedback-page-url');
  if (urlInput) urlInput.value = window.location.href;

  document.addEventListener('click', function(e) {
    var widget = document.getElementById('feedback-widget');
    if (widget && !widget.contains(e.target)) {
      var popover = document.getElementById('feedback-popover');
      if (popover) popover.classList.remove('open');
    }
  });
</script>
