/* SMART CONTEXT MENU – Compact + Never Leaves Screen (2025 Final) */
.smart-context {
    position: fixed;
    background: rgba(12, 14, 28, 0.97);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 10px;
    padding: 6px 0;
    min-width: 160px;
    max-width: 200px;
    box-shadow: 0 10px 24px rgba(0,0,0,0.45);
    z-index: 999999;
    font-size: 0.84rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(0.96);
    transition: all 0.19s cubic-bezier(0.2,0,0.2,1);
    pointer-events: none;
    user-select: none;
    
    /* ✅ REMOVED: left: 0 !important; top: 0 !important; */
    /* Let JavaScript control positioning */
    
    transform-origin: top left;
}

.smart-context.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* Rest of your CSS stays the same */
.smart-context.flip-x { transform-origin: top right; }
.smart-context.flip-y { transform-origin: bottom left; }
.smart-context.flip-both { transform-origin: bottom right; }


.ctx-group { display: none; }
.ctx-group.active { display: block; }

.ctx-item {
  padding: 8px 14px;             /* was 10px 16px */
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;                     /* was 12px */
  cursor: pointer;
  transition: background 0.16s ease;
}
.ctx-item:hover {
  background: rgba(255,255,255,0.09);
}
.ctx-item i {
  width: 16px;
  font-size: 0.88rem;            /* smaller icons */
  color: var(--accent);
  opacity: 0.9;
}
.ctx-item.muted {
  opacity: 0.65;
  font-size: 0.76rem;            /* even tinier footer */
  cursor: default;
}
.ctx-item.muted:hover { background: none; }

.ctx-divider {
  height: 1px;
  background: rgba(255,255,255,0.07);
  margin: 5px 12px;              /* tighter */
}



/* Perfectly matches your existing .ctx-item design */
#love-footer {
  padding: 8px 14px; /* ← EXACT same as .ctx-item */
  justify-content: flex-start; /* ← Matches other items */
  font-size: 0.76rem; /* ← Matches .ctx-item.muted */
  opacity: 0.65; /* ← Matches .ctx-item.muted */
  gap: 10px; /* ← Matches .ctx-item gap */
}

/* Heart styling that fits your design system */
#love-footer i {
  width: 16px; /* ← EXACT same as .ctx-item i */
  font-size: 0.88rem; /* ← EXACT same as .ctx-item i */
  color: var(--accent); /* Beautiful pink */
  opacity: 0.9; /* ← Matches .ctx-item i */
}

/* Subtle animation that doesn't break alignment */
#love-footer i {
  animation: heartBeat 3s ease-in-out infinite;
}

@keyframes heartBeat {
  0%, 100% { 
    transform: scale(1); 
  }
  50% { 
    transform: scale(1.08); 
  }
}

/* Footer text styling */
.footer-text {
  font-weight: 400; /* Matches your font */
  letter-spacing: 0.2px;
}