#pj-container {
    position: fixed;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: opacity 0.25s ease;
}

.pj-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    font-size: 18px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.35);
    transition: transform 0.2s ease;
    position: relative; /* for progress ring */
}

.pj-btn:hover {
    transform: scale(1.08);
}

/* ────────────────────────────────────────────────
   Pro shape support (added)
───────────────────────────────────────────────── */
.pj-shape-square  .pj-btn { border-radius: 8px; }
.pj-shape-rounded .pj-btn { border-radius: 12px; }
.pj-shape-pill    .pj-btn { border-radius: 999px; }

/* Basic animation classes (fade is default via opacity) */
.pj-anim-slide {
    transition: all 0.4s ease;
}

/* Progress ring – basic Pro feature */
.pj-progress-ring {
    position: absolute;
    inset: -4px;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    transform: rotate(-90deg);
    pointer-events: none;
}
.pj-progress-bg {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 2.8;
}
.pj-progress {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.8;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset 0.15s linear;
}