.nexus-citation-container { position: relative; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; margin: 0 4px; } .nexus-citation-trigger { background: transparent; border: none; padding: 0; margin: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #06b6d4; /* Glowing Cyan */ width: 20px; height: 20px; position: relative; outline: none; transition: all 0.3s ease; } .nexus-citation-trigger:hover { color: #00ff99; /* Neon Green on hover */ transform: scale(1.2); } .neon-radar-svg { width: 100%; height: 100%; filter: drop-shadow(0 0 4px currentColor); animation: radar-spin 8s linear infinite; } .pulse-ring { position: absolute; width: 100%; height: 100%; border: 1px solid currentColor; border-radius: 50%; animation: radar-ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite; opacity: 0; pointer-events: none; } .nexus-citation-popup { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(5px); width: 320px; padding: 1rem; border-radius: 12px; background: rgba(10, 16, 26, 0.9); /* Premium dark background */ border: 1px solid rgba(6, 182, 212, 0.25); /* Cyan border */ backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 12px rgba(6, 182, 212, 0.15); z-index: 1000; pointer-events: none; opacity: 0; animation: popup-fade-in 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards; transform-origin: bottom center; } .popup-header { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 0.75rem; font-weight: 700; color: #00ff99; /* Emerald/Neon Green micro-header */ text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05); padding-bottom: 0.35rem; } .separator { color: rgba(255, 255, 255, 0.3); } .book-title { display: flex; align-items: center; gap: 4px; } .book-author, .page-number { color: rgba(255, 255, 255, 0.6); } .popup-body { margin-bottom: 0.5rem; } .citation-quote { font-size: 0.85rem; line-height: 1.4; color: rgba(255, 255, 255, 0.95); font-style: italic; margin: 0; } .popup-footer { display: flex; justify-content: flex-end; } .id-badge { font-size: 0.65rem; color: rgba(255, 255, 255, 0.3); font-family: monospace; } /* Animations */ @keyframes radar-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes radar-ping { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(2.2); opacity: 0; } } @keyframes popup-fade-in { 0% { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.95); } 100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } }