<figure class="cbq-copy">
  <button type="button" class="cbq-copy-btn" aria-label="Copy quote to clipboard">
    <svg viewBox="0 0 24 24" aria-hidden="true" width="14" height="14">
      <rect
        x="9"
        y="9"
        width="11"
        height="11"
        rx="2"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
      />
      <path
        d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
      />
    </svg>
    <span class="cbq-copy-label">Copy</span>
  </button>
  <blockquote class="cbq-copy-quote">
    <p>"Premature optimization is the root of all evil."</p>
  </blockquote>
  <figcaption>— Donald Knuth</figcaption>
</figure>

.cbq-copy {
  position: relative;
  max-width: 340px;
  padding: 22px;
  background: #18181f;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  font-family: system-ui, sans-serif;
  color: #f0eeff;
}

.cbq-copy-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.04);
  color: #a78bfa;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}

.cbq-copy-btn:hover {
  background: rgba(167, 139, 250, 0.12);
  border-color: rgba(167, 139, 250, 0.45);
}

.cbq-copy-btn:focus-visible {
  outline: 2px solid #a78bfa;
  outline-offset: 2px;
}

.cbq-copy-btn.is-copied {
  color: #2ecc8a;
  border-color: rgba(46, 204, 138, 0.45);
  background: rgba(46, 204, 138, 0.08);
}

.cbq-copy-quote {
  margin: 0;
  padding-right: 56px;
}

.cbq-copy-quote p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  font-style: italic;
}

.cbq-copy figcaption {
  margin-top: 14px;
  font-size: 12px;
  color: #b8b6d4;
}

(function () {
  document.querySelectorAll(".cbq-copy").forEach(function (root) {
    var btn = root.querySelector(".cbq-copy-btn");
    var label = root.querySelector(".cbq-copy-label");
    var quote = root.querySelector(".cbq-copy-quote");
    if (!btn || !label || !quote) return;
    btn.addEventListener("click", function () {
      var text = quote.textContent.trim();
      navigator.clipboard.writeText(text).then(function () {
        btn.classList.add("is-copied");
        label.textContent = "Copied!";
        setTimeout(function () {
          btn.classList.remove("is-copied");
          label.textContent = "Copy";
        }, 1600);
      });
    });
  });
})();