

.thought-wrap{position:relative;display:flex;flex-direction:column;
  align-items:flex-start;cursor:pointer;}
.thought-bubble{background:#fff;border-radius:22px;padding:11px 15px;
  display:flex;align-items:center;gap:9px;min-width:175px;
  box-shadow:0 2px 16px rgba(0,0,0,.25);transition:transform .15s;}
.thought-wrap:hover .thought-bubble{transform:translateY(-2px);}
.song-title{font-size:12.5px;font-weight:800;color:#111;}
.song-artist{font-size:10.5px;color:#777;font-style:italic;}
.vinyl{width:30px;height:30px;border-radius:50%;flex-shrink:0;
  background:radial-gradient(circle at 50% 50%,#eee 28%,transparent 28%),
    conic-gradient(#0a204e,#3a82ed,#0a254e,#3aa5ed,#0a254e);
  border:2px solid #c4b5fd;}
.thought-wrap.playing .vinyl{animation:spin 3s linear infinite;border-color:#3a79ed;}
@keyframes spin{to{transform:rotate(360deg)}}
.thought-trail{position:relative;left:20px;display:flex;
  flex-direction:column-reverse;gap:3px;margin-top:5px;}
.trail-dot{border-radius:50%;background:#ffffff;box-shadow:0 1px 6px rgba(0, 0, 0, 0.18);}
.trail-dot:nth-child(1){width:4px;height:4px;margin-left:6px}
.trail-dot:nth-child(2){width:8px;height:8px;margin-left:3px}
.trail-dot:nth-child(3){width:13px;height:13px}
.notes-field{position:absolute;top:-8px;left:0;right:0;
  height:0;pointer-events:none;overflow:visible;z-index:10;}
.fnote{position:absolute;font-size:15px;color:#030969;opacity:0;
  filter:drop-shadow(0 0 4px #3a82ed99);}
.thought-wrap.playing .fnote{
  animation:note-up var(--d,2.2s) var(--dl,0s) ease-out infinite;}
@keyframes note-up{
  0%{opacity:0;transform:translate(var(--sx,0px),8px) scale(.5)}
  15%{opacity:1} 80%{opacity:.7}
  100%{opacity:0;transform:translate(var(--ex,0px),-68px) scale(1.1) rotate(var(--r,12deg))}}
.eq{display:flex;align-items:flex-end;gap:2px;height:14px;opacity:0;transition:opacity .3s;}
.thought-wrap.playing .eq{opacity:1;}
.eq span{width:2.5px;border-radius:2px;background:#3a64ed;}
.thought-wrap.playing .eq span{animation:eq-bar var(--s,.5s) ease-in-out infinite alternate;}
.eq span:nth-child(1){--s:.45s;height:4px}
.eq span:nth-child(2){--s:.62s;height:9px;animation-delay:.08s}
.eq span:nth-child(3){--s:.38s;height:6px;animation-delay:.16s}
.eq span:nth-child(4){--s:.55s;height:11px;animation-delay:.04s}
.eq span:nth-child(5){--s:.70s;height:5px;animation-delay:.12s}
@keyframes eq-bar{from{transform:scaleY(1)}to{transform:scaleY(.2)}}

