/* ═══════════════════════════════════════════════════════════════════════════
   Post action bar — 4D design (depth + motion)
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --pbar-spring: cubic-bezier(.34, 1.56, .64, 1);
  --pbar-ease:   cubic-bezier(.2, .7, .3, 1);
  --pbar-like:      #e11d48;
  --pbar-repost:    #16a34a;
  --pbar-bookmark:  #d97706;
  --pbar-follow:    #6c7cff;
  --pbar-follow-2:  #a56cff;
  --pbar-share:     #0ea5e9;
  --pbar-copy:      #a855f7;
  --pbar-depth:       0 8px 20px rgba(0,0,0,.06);
  --pbar-depth-hover: 0 14px 30px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.08);
}

.pbar {
  display: flex;
  align-items: center;
  gap: .15rem;
  padding: .55rem .3rem .25rem;
  margin-top: .55rem;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
  position: relative;
  perspective: 900px;
  transform-style: preserve-3d;
  transition: transform .5s var(--pbar-ease);
  overflow: visible;
}
.pbar::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 50%);
  border-radius: inherit;
  z-index: 0;
}

.pbar-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .8rem;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transform-style: preserve-3d;
  transform: translateZ(0);
  transition:
    transform .35s var(--pbar-spring),
    box-shadow .3s var(--pbar-ease),
    background .25s var(--pbar-ease),
    color .2s var(--pbar-ease),
    border-color .25s var(--pbar-ease);
  will-change: transform;
  isolation: isolate;
  overflow: visible;
}
.pbar-btn:disabled { opacity: .55; cursor: wait; }

.pbar-btn::after {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -3px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.16), transparent 70%);
  opacity: 0;
  transition: opacity .3s var(--pbar-ease), transform .3s var(--pbar-ease);
  transform: translateZ(-8px) scaleX(.8);
  pointer-events: none;
  z-index: -1;
}

.pbar-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.15), transparent 45%);
  opacity: 0;
  transition: opacity .25s var(--pbar-ease);
  pointer-events: none;
  z-index: 0;
}

.pbar-btn:hover {
  transform: translateY(-3px) translateZ(14px) rotateX(-6deg);
  background: rgba(127,127,127,.08);
  color: var(--text);
  box-shadow: var(--pbar-depth-hover);
  border-color: rgba(127,127,127,.12);
}
.pbar-btn:hover::before { opacity: 1; }
.pbar-btn:hover::after  { opacity: 1; transform: translateZ(-8px) scaleX(1.05); }

.pbar-btn:active {
  transform: translateY(0) translateZ(2px) rotateX(-1deg) scale(.97);
  transition-duration: .12s;
}

.pbar-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(79,70,229,.35), var(--pbar-depth-hover);
}

.pbar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  line-height: 1;
  transition: transform .4s var(--pbar-spring), filter .3s var(--pbar-ease);
  transform: translateZ(8px);
  will-change: transform;
}
.pbar-count {
  font-variant-numeric: tabular-nums;
  transition: transform .35s var(--pbar-spring), color .2s var(--pbar-ease);
  transform: translateZ(4px);
  min-width: 1.1em;
  text-align: center;
}
.pbar-label {
  transform: translateZ(4px);
  transition: transform .35s var(--pbar-spring);
}

.pbar-btn.like-btn:hover .pbar-icon,
.pbar-btn.react:hover .pbar-icon {
  transform: translateZ(14px) scale(1.18) rotate(-6deg);
  filter: drop-shadow(0 4px 8px rgba(225,29,72,.35));
}
.pbar-btn.like-btn.active,
.pbar-btn.react.active {
  color: var(--pbar-like);
  background: linear-gradient(135deg, rgba(225,29,72,.14), rgba(225,29,72,.06));
  border-color: rgba(225,29,72,.28);
  box-shadow: 0 8px 20px rgba(225,29,72,.22), inset 0 1px 0 rgba(255,255,255,.25);
}
.pbar-btn.like-btn.active .pbar-icon,
.pbar-btn.react.active .pbar-icon {
  animation: pbarHeartPump 1.1s ease-in-out infinite;
  transform: translateZ(14px) scale(1.05);
}
@keyframes pbarHeartPump {
  0%,100% { transform: translateZ(14px) scale(1.05); }
  18%     { transform: translateZ(14px) scale(1.22); }
  32%     { transform: translateZ(14px) scale(1.05); }
  46%     { transform: translateZ(14px) scale(1.18); }
  60%     { transform: translateZ(14px) scale(1.05); }
}

.pbar-btn.comment-btn:hover .pbar-icon,
.pbar-btn.comment-toggle:hover .pbar-icon {
  transform: translateZ(14px) scale(1.12) rotate(-4deg);
  filter: drop-shadow(0 4px 8px rgba(79,70,229,.35));
}

.pbar-btn.repost-btn:hover .pbar-icon {
  transform: translateZ(14px) rotate(360deg) scale(1.1);
  transition: transform .8s var(--pbar-ease);
  filter: drop-shadow(0 4px 8px rgba(22,163,74,.35));
}
.pbar-btn.repost-btn.active {
  color: var(--pbar-repost);
  background: linear-gradient(135deg, rgba(22,163,74,.14), rgba(22,163,74,.06));
  border-color: rgba(22,163,74,.28);
  box-shadow: 0 8px 20px rgba(22,163,74,.22), inset 0 1px 0 rgba(255,255,255,.25);
}
.pbar-btn.repost-btn.active .pbar-icon {
  animation: pbarRepostSpin 3s linear infinite;
}
@keyframes pbarRepostSpin {
  from { transform: translateZ(14px) rotate(0deg); }
  to   { transform: translateZ(14px) rotate(360deg); }
}

.pbar-btn.bookmark-btn:hover .pbar-icon {
  transform: translateZ(14px) scale(1.15) translateY(-2px);
  filter: drop-shadow(0 4px 8px rgba(217,119,6,.35));
}
.pbar-btn.bookmark-btn.active {
  color: var(--pbar-bookmark);
  background: linear-gradient(135deg, rgba(217,119,6,.14), rgba(217,119,6,.06));
  border-color: rgba(217,119,6,.28);
  box-shadow: 0 8px 20px rgba(217,119,6,.22), inset 0 1px 0 rgba(255,255,255,.25);
}
.pbar-btn.bookmark-btn.active .pbar-icon {
  animation: pbarBookmarkSettle .6s var(--pbar-spring);
}
@keyframes pbarBookmarkSettle {
  0%   { transform: translateZ(14px) translateY(-12px) scale(.6); opacity: 0; }
  60%  { transform: translateZ(14px) translateY(0) scale(1.15); opacity: 1; }
  100% { transform: translateZ(14px) translateY(0) scale(1); }
}

.pbar-btn.share-btn { position: relative; }
.pbar-btn.share-btn:hover .pbar-icon {
  transform: translateZ(14px) scale(1.15) rotate(15deg);
  filter: drop-shadow(0 4px 8px rgba(14,165,233,.35));
}

.pbar-btn.copy-btn:hover .pbar-icon {
  transform: translateZ(14px) scale(1.1);
  filter: drop-shadow(0 4px 8px rgba(168,85,247,.35));
}
.pbar-btn.copy-btn.copied {
  color: #16a34a;
  background: rgba(22,163,74,.12);
  border-color: rgba(22,163,74,.28);
}
.pbar-btn.copy-btn.copied .pbar-icon {
  animation: pbarCheckPop .5s var(--pbar-spring);
}
@keyframes pbarCheckPop {
  0%   { transform: translateZ(14px) scale(0) rotate(-45deg); }
  70%  { transform: translateZ(14px) scale(1.2) rotate(6deg); }
  100% { transform: translateZ(14px) scale(1) rotate(0deg); }
}

.pbar-btn.follow-btn,
.pbar-btn.social-follow-btn { color: var(--pbar-follow); }
.pbar-btn.follow-btn:hover .pbar-icon,
.pbar-btn.social-follow-btn:hover .pbar-icon {
  transform: translateZ(14px) scale(1.15) rotate(-15deg);
}
.pbar-btn.follow-btn.active,
.pbar-btn.social-follow-btn.active {
  background: linear-gradient(135deg, rgba(108,124,255,.16), rgba(165,108,255,.1));
  border-color: rgba(108,124,255,.35);
  color: var(--pbar-follow);
  box-shadow: 0 8px 20px rgba(108,124,255,.25), inset 0 1px 0 rgba(255,255,255,.25);
}

.pbar-btn.more-btn:hover .pbar-icon {
  transform: translateZ(14px) rotate(90deg);
  transition: transform .4s var(--pbar-spring);
}
.pbar-btn.more-btn.open .pbar-icon {
  transform: translateZ(14px) rotate(90deg);
}

.pbar-btn.count-bump .pbar-count {
  animation: pbarCountBump .5s var(--pbar-spring);
}
@keyframes pbarCountBump {
  0%   { transform: translateZ(4px) scale(1); }
  40%  { transform: translateZ(4px) scale(1.35); color: var(--primary); }
  100% { transform: translateZ(4px) scale(1); }
}

.pbar-ripple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  transform: scale(0);
  opacity: .55;
  background: radial-gradient(circle, currentColor 0%, transparent 70%);
  animation: pbarRipple .7s var(--pbar-ease) forwards;
  z-index: 1;
}
@keyframes pbarRipple {
  0%   { transform: scale(0);   opacity: .55; }
  100% { transform: scale(2.8); opacity: 0; }
}

.pbar-burst {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pbar-like);
  pointer-events: none;
  z-index: 2;
  animation: pbarBurst .7s var(--pbar-ease) forwards;
  will-change: transform, opacity;
}
@keyframes pbarBurst {
  0%   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0); opacity: 0; }
}

.pbar-share-wrap,
.pbar-more-wrap {
  position: relative;
  transform-style: preserve-3d;
}

.pbar-share-menu,
.pbar-more-menu {
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: 8px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 20px 40px rgba(0,0,0,.22), 0 4px 10px rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.2);
  min-width: 210px;
  padding: .4rem;
  display: none;
  z-index: 200;
  transform-origin: bottom right;
  transform-style: preserve-3d;
}
.pbar-share-menu.open,
.pbar-more-menu.open {
  display: block;
  animation: pbarMenu3DIn .32s var(--pbar-spring) forwards;
}
@keyframes pbarMenu3DIn {
  from { opacity: 0; transform: perspective(600px) rotateX(-25deg) translateY(12px) scale(.9); }
  to   { opacity: 1; transform: perspective(600px) rotateX(0) translateY(0) scale(1); }
}

.pbar-share-menu a,
.pbar-share-menu button,
.pbar-more-menu a,
.pbar-more-menu button {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  text-align: left;
  padding: .55rem .8rem;
  border-radius: 10px;
  border: 0;
  background: none;
  color: var(--text);
  font-family: inherit;
  font-size: .87rem;
  cursor: pointer;
  text-decoration: none;
  transition: transform .25s var(--pbar-spring), background .15s var(--pbar-ease), color .15s var(--pbar-ease);
}
.pbar-share-menu a:hover,
.pbar-share-menu button:hover,
.pbar-more-menu a:hover,
.pbar-more-menu button:hover {
  background: linear-gradient(135deg, rgba(108,124,255,.1), rgba(165,108,255,.06));
  transform: translateX(4px) translateZ(8px);
  text-decoration: none;
  color: var(--primary);
}
.pbar-more-menu .menu-danger { color: var(--danger); }
.pbar-more-menu .menu-danger:hover { background: rgba(229,62,62,.1); color: var(--danger); }

.pbar-repost-menu {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 8px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 20px 40px rgba(0,0,0,.22), 0 4px 10px rgba(0,0,0,.1);
  min-width: 220px;
  padding: .4rem;
  z-index: 200;
  animation: pbarMenu3DIn .28s var(--pbar-spring) forwards;
}
.pbar-repost-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: .6rem .85rem;
  border-radius: 10px;
  border: 0;
  background: none;
  color: var(--text);
  font-family: inherit;
  font-size: .88rem;
  cursor: pointer;
  transition: transform .25s var(--pbar-spring), background .15s var(--pbar-ease);
}
.pbar-repost-menu button:hover {
  background: rgba(22,163,74,.1);
  color: var(--pbar-repost);
  transform: translateX(4px);
}

@media (max-width: 700px) {
  .pbar { gap: 0; padding: .35rem .15rem; }
  .pbar-btn { padding: .45rem .55rem; font-size: .78rem; }
  .pbar-btn:hover { transform: translateY(-2px) translateZ(6px) rotateX(-3deg); }
  .pbar-label { display: none; }
  .pbar-share-menu,
  .pbar-more-menu,
  .pbar-repost-menu { right: auto; left: 0; max-width: calc(100vw - 2rem); }
}

@media (prefers-reduced-motion: reduce) {
  .pbar-btn, .pbar-btn::before, .pbar-btn::after,
  .pbar-icon, .pbar-count,
  .pbar-share-menu, .pbar-more-menu {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
  .pbar-btn:hover { transform: none; }
}